<!doctype html>
<html lang="zh-Hans-CN">

<head>
	<title>04-填充样式与边框绘制原理</title>
	<meta charset="utf-8">
	<meta name="keywords" content="">
	<meta name="description" content="">
	<meta name="author" content="chen">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="X-UA-Compatible" content="ie=edge, chrome=1">
	<!--<link rel="stylesheet" type="css/text" media="screen and ( min-width: 1200px )" href="">-->
	<link rel="stylesheet" type="text/css" media="screen" href="">
	<script defer="defer" src=""></script>
	<style>
		/*@import url("css/name.css") screen and ( min-width: 1200px );*/
		canvas {
			/* 样式属性设置宽高会拉伸内容区
			请不要在此处设置宽高
			这里是内容区边框 */
			border: 1px solid black;
		}
	</style>
</head>

<body>
	<canvas width='500' height='400'></canvas>
	<script>
		// 矩形的绘制
		// 1. 建立<canvas>标签
		// 2. 获取<canvas>内容区
		// 注意: <canvas>内容区默认属性 width='300' height='150'
		const oC = document.querySelector('canvas');
		const cxt = oC.getContext('2d');

			
		// 3. 设置填充样式(颜色), 填充样式要在绘制函数之前设置
		// 后设置的样式会覆盖先设置的
        cxt.fillStyle = '#0f0';					// 3位16进制数
        cxt.fillStyle = 'rgb(255,0,0)';			// rgb模式
        cxt.fillStyle = 'rgba(0,0,255,0.5)';	// rgba模式
        cxt.fillStyle = 'hsl(120,50%,50%)';		// hsl模式
        cxt.fillStyle = 'hotpink';				// 颜色名称

		// 4. 调用矩形绘制函数
		cxt.fillRect(100,100,50,50);	// 起始X轴, 起始Y轴, X轴长度, Y轴长度

		// 矩形的边框绘制是从中心线开始向两边扩散绘制的, 所以即使设置了1px的边框线也会绘制出2个灰度像素
		// 解决办法就是改变起始位置, 让其计算出错
		cxt.rect(199.5,199.5,100,100)	// 绘制1px边框矩形的方法
		cxt.stroke();					// 绘制笔触
	</script>
</body>

</html>